<template>
  <div class="crm-operate-record">
    <search @search="handleSearch" @reset="handleReset">
      <div style="display: flex">
        <SearchInput searchText="Client Name">
          <a-input v-model:value="clientName" />
        </SearchInput>
        <SearchInput searchText="Operate Type">
          <a-select
            v-model:value="operateType"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode">
            <a-select-option v-for="item in state.operateTypeList" :key="item.value" :label="item.text">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </SearchInput>
        <SearchInput searchText="Operator">
          <a-input v-model:value="operator" />
        </SearchInput>
        <SearchInput searchText="Operate On">
          <a-select
            v-model:value="operateOn"
            show-search
            option-filter-prop="label"
            option-label-prop="label"
            :get-popup-container="triggerNode => triggerNode.parentNode">
            <a-select-option value="0" label="All">All</a-select-option>
            <a-select-option value="3" label="3 months">3 months</a-select-option>
          </a-select>
        </SearchInput>
      </div>
    </search>
    <e-container style="margin-top: 24px">
      <a-spin :spinning="loading" tip="Loading...">
        <a-table
          :columns="columns"
          :data-source="data"
          class="ant-table-striped"
          :pagination="false"
          :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)">
          <template #emptyText>
            <e-empty>
              <template #description>
                <div>No Data</div>
              </template>
            </e-empty>
          </template>
        </a-table>
      </a-spin>
      <div v-if="total > 0" class="pagination">
        <a-pagination
          v-model:current="current"
          v-model:pageSize="pageSize"
          :total="total"
          show-less-items
          :show-size-changer="false"
          @change="changeSize" />
      </div>
    </e-container>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
// 引入组件
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import Search from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
// 获取列
import pageColumns from '@/assets/script/page_columns.js'
import others from '@/api/others.js'

const columns = reactive(pageColumns.crmOperateRecord)
const store = useStore()
// 过滤条件
const clientName = ref('')
const operateType = ref(0)
const operator = ref('')
const operateOn = ref('0')
// 当前页码
const current = ref(1)
// 每页条数
const pageSize = ref(10)
// 总条数
const total = ref(2)
// 表格数据
const data = ref([])
const loading = ref(false)

const state = reactive({
  operateTypeList: [{ value: 0, text: 'All' }]
})
const dict = ref(computed(() => store.state.dict))
store.dispatch('dict/getClientOperateTypes').then(() => {
  if (dict.value.clientOperateTypes.length > 0) {
    state.operateTypeList = [...state.operateTypeList, ...dict.value.clientOperateTypes]
  }
})
/**
 * 搜索
 */
const handleSearch = () => {
  current.value = 1
  getList()
}
/**
 * 清空
 */
const handleReset = () => {
  clientName.value = ''
  operateType.value = 0
  operator.value = ''
  operateOn.value = '0'
  current.value = 1
  getList()
}
/**
 * 切换页码
 * @param cur
 */
const changeSize = cur => {
  current.value = cur
  getList()
}
/**
 * 获取列表
 */
const getList = () => {
  loading.value = true
  others
    .recordQuery({
      page: {
        pageRows: pageSize.value,
        pageIndex: current.value,
        total: 0
      },
      clientName: clientName.value.trim(),
      operateType: operateType.value,
      operator: operator.value.trim(),
      operateOn: operateOn.value
    })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
        total.value = res.total
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
onMounted(() => {
  getList()
})
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_table';
@import '@/assets/style/reset_form';
</style>
<route lang="yaml">
name: CRM Operate Record
path: '/crm-operate-record/'
meta:
  title: CRM Operate Record
  roles: isPrimaryCSO, isSalesSupport
</route>
